<!-- <template>
    <div>
        <van-nav-bar :title="item"/>
        <router-view />
        {{ item }}
        <van-tabbar v-model="item" routee active-color="#ee0a24">
          <van-tabbar-item name="首页" replace to="/tool/index" icon="home-o">首页</van-tabbar-item>
          <van-tabbar-item name="分类" replace to="/tool/cate" icon="search">分类</van-tabbar-item>
          <van-tabbar-item name="购物车" replace to="/tool/car" icon="friends-o">购物车</van-tabbar-item>
          <van-tabbar-item name="我的" replace to="/tool/my" icon="setting-o">我的</van-tabbar-item>
        </van-tabbar>

    </div>
</template>

<script setup>
import {ref} from "vue"

const item = ref<string>('首页')
</script>

<style scoped>

</style> -->


<template>
  <div class="layout-container">
    <router-view />
    
    <van-tabbar v-model="active" route active-color="#ee0a24" safe-area-inset-bottom>
      <van-tabbar-item replace to="/tool/index" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/tool/cate" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/tool/car" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/tool/my" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const active = ref(0)

// 根据当前路由更新激活状态
watch(() => route.path, (newPath) => {
  switch(newPath) {
    case '/tool/index':
      active.value = 0
      break
    case '/tool/cate':
      active.value = 1
      break
    case '/tool/car':
      active.value = 2
      break
    case '/tool/my':
      active.value = 3
      break
    default:
      active.value = 0
  }
}, { immediate: true })
</script>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.van-tabbar {
  border-top: 1px solid #f5f5f5;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}
</style>